import {messages} from "share/common";
import React from 'react';
import { Row, DatePicker, Icon, Col } from 'antd';
import Location from 'components/location';
import moment from 'moment';
import 'styles/mileage-subsidy-expense/way-point-edit.scss';
import Condition from 'components/condition';

const { If } = Condition;

class WayPointEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleShow = () => {
    const { value } = this.props;
    if(!value){
      return;
    }
    let { show } = this.state;
    show = !show;
    this.setState({ show });
  };

  handleLocationChange = (res = {}, index) => {
    let { value, onChange } = this.props;
    if (value[index]['id'] && value[index]['createdMode'] === 1001 && !value[index]['originPoint']) {
      value[index]['originPoint'] = {
        lat: value[index].lat,
        lng: value[index].lng,
        place: value[index].place
      };
    }
    if (value[index].lat) {
      value[index].lat = JSON.parse(res).latitude;
      value[index].lng = JSON.parse(res).longitude;
      value[index].place = JSON.parse(res).address;
    }
    onChange(value);
  };

  handleTimeChange = (res, index) => {
    let { value, onChange } = this.props;
    value[index].arrivalTime = res;
    onChange(value);
  };

  handleDelete = (index) => {
    let { value, onChange } = this.props;
    value.splice(index, 1);
    onChange(value);
  };

  handleElement = (result) => {
    const obj = {
      icon: Icon,
      date: DatePicker,
      location: Location
    };
    return (
      <section>
        <Row className={result.className}>{React.createElement(obj[result.type], result.params)}</Row>
        <If value={result.type === 'location' && result.originPoint}>
          <Row className="way-point-edit__row_origin"> {messages('mileage-subsidy-expense.key59')/*[原定位]*/}{JSON.parse(result.originPoint || '{}').place}</Row>
        </If>
      </section>
    );
  };

  renderContent = (value, index) => {
    const { disabled } = this.props;
    const dataSourceV2 = [
      {
        type: 'date',
        params: {
          value: value['arrivalTime'] && moment(value['arrivalTime']),
          format: 'YYYY-MM-DD HH:mm',
          showTime: true,
          onChange: (res) => this.handleTimeChange(res, index),
          className: 'way-point-edit-date',
          disabled
        }
      },
      {
        type: 'location',
        params: {
          value: value.lat && JSON.stringify({
            latitude: value.lat,
            longitude: value.lng,
            address: value.place
          }),
          onChange: (res) => this.handleLocationChange(res, index),
          disabled
        },
        originPoint: value.originPoint
      }
    ];

    return dataSourceV2.map(item => this.handleElement(item, index));
  };

  render() {
    const { value = [] } = this.props;
    const { show } = this.state;

    return (
      <section className="way-point-edit">
        <If value={show}>
          {
            value && value.map((item, index) => {
              return (
                <Row className="way-point-edit-row">
                  {this.renderContent(item, index)}
                </Row>);
            })
          }
        </If>
          <a className={`way-point-edit-icon ${show ? 'way-point-edit-icon_active' : ''}`} onClick={this.handleShow}>
            {show ? messages('mileage-subsidy-expense.key60',{arg1: value?value.length:0})/*（{arg1}个途径点）收起*/ : messages('mileage-subsidy-expense.key61',{arg1: value?value.length:0})/*（{arg1}个途径点）查看全部*/}
          </a>
      </section>
    );
  }
}

WayPointEdit.PropTypes = {
  value: React.PropTypes.array,
  onChange: React.PropTypes.func,
  disabled: React.PropTypes.bool
};

export default WayPointEdit;
